<template>
    <div class="miuse">
        <div>
            <mt-header :title="miuselist.navigationName">
    <router-link to="/" slot="left">
    <mt-button icon="back">返回</mt-button>
    </router-link>
    <mt-button icon="more" slot="right"></mt-button>
    </mt-header>
    <div class="yinyue">
        <van-notice-bar :text="miuselist.musicName+'——'+miuselist.artistName" />
        <img src="../assets/35.jpg" class="img">
    </div>   
        <audio :src="miuselist.musicMp3Url" controls class="audio"></audio>

        </div>
    </div>
</template>
<script>
export default {
    name:"miuse",
    data(){
        return{
            miuselist:{},

        }
    },
    mounted(){

        var id = this.$route.query.sid;
        var token = sessionStorage.getItem("token");
        var str = `token=${token}&musicId=${id.musicId}`;
        this.axios.post("http://123.57.130.65:8080/carousel/findMusicById",str).then(res=>{
            if(res.data.code==200){
                this.miuselist=res.data.data;
            }else{
                this.$router.push("/");
            }
        })
    }
}
</script>
<style scoped>
.miuse{
    /* text-align: center; */
     width: 100%;
  height: 100%;
  position: fixed;
    background-color:  #fbfef9!important ;

}
.audio{
background-color: #fbfef9!important ;
    margin: 0px 0px 55px 44px;
position: fixed;

bottom: 0;
}
.yinyue{
    width: 200px;
    height: 250px;
    margin: 20px 84px;
}
.img{
    width: 200px;
    height: 250px; 
}
.van-notice-bar{
background-color: #fbfef9!important;
}

</style>